<template>
	<view class="au_content">
		<view class="backColor"></view>
		<view :style="{ height: statusBarHeight + 'px' }"></view>
		<!-- 返回，默认返回首页 -->
		<view class="au_return">
			<image :src="HTTP_IMG_UTL + 'fanhui.png'" style="width: 28rpx;height: 40rpx;" mode="" @click="handelReturn" />
			<view></view>
		</view>


		<!-- 您的国籍文字 -->
		<view class="au_nationality_title firstxx">
			<view><span style="font-size: 36rpx;">选择国籍</span> <span class="bt">必选</span></view>
		</view>
		<!-- 选择国籍  -->
		<view class="au_nat">
			<view :class="['guoji', index === countryID ? 'items' : 'items_active']" v-for="(item, index) in nationalitys"
				:key="index" @click="handelNationalitys(index)">
				<image :src="item.imgurl" mode="heightFix" style="width: 39rpx;height: 26rpx;">
				</image>
				<view>{{ $t(item.name) }}</view>
			</view>
		</view>

		<view class="au_nationality_title">
			<view><span style="font-size: 36rpx;">所在地区</span> <span class="bt">必选</span></view>
		</view>

		<!-- form表单 -->
		<view class="au_form">
			<u-form labelPosition="top" :model="model" ref="uForm" v-if="showFlaxxx">
				<u-form-item prop="area_id">
					<view class="flex_1">
						<city :value="fullBeginAddressKey" @change="onChangeDiqu" style="width: 100%;">
							<view class="inpxxx">
								{{ fullBeginAddress || "请选择所在地区" }}
							</view>
						</city>
					</view>
				</u-form-item>
				<view class="au_nationality_title" v-show="!!identityList && !!identityList.length">
					<view><span style="font-size: 36rpx;">选择身份</span> <span class="bt">必选</span></view>
				</view>
				<u-form-item prop="identity_title" v-show="!!identityList && !!identityList.length">
					<!-- <view class="flex_1" @click="handelIdentity">
						<view style="display: flex;justify-content: flex-start;">
							<view style="color: #C76E21;font-size: 32rpx;" >
								{{identityTitle!==''?identityTitle:''}}
							</view>
							<view style="color: #808080;font-size: 32rpx;" >
								{{identityTitle ===''?$t('请选择身份'):''}}
							</view>
						</view>
						<image :src="HTTP_IMG_UTL+'right_218@2x.png'" mode=""
							style="width: 25rpx;height: 12rpx;"></image>
					</view> -->
					<!-- 	<view class="flex_1 wrap">
						<view class="identity_item" v-for="item in identityList" :key="item.id"
							:class="{active: item.active}" @click="handelConfirm(item)">
							{{ lang==='zh' ? item.name : item.name_ru }}
						</view>
					</view> -->
					<!-- 身份选择 -->
					<view class="identity">
						<view class="identityitem" :class="{ items: item.active }" v-for="(item, index) in identityList"
							:key="index" @click="handelConfirm(item)">
							<view>{{ lang === 'zh' ? item.name : item.name_ru }}</view>
						</view>
					</view>
				</u-form-item>
				<view class="au_nationality_title">
					<view><span style="font-size: 36rpx;">公司名称/用户昵称</span> <span class="bt">必选</span></view>
				</view>
				<u-form-item prop="name">
					<u-input
						:custom-style="{ color: '#808080', background: '#F7F7F7', borderRadius: '40rpx', paddingLeft: '24rpx' }"
						v-model="model.name" clearable class="no_border" placeholder="" />
				</u-form-item>
				<!-- 头像上传 -->
				<view class="au_nationality_title">
					<view><span style="font-size: 36rpx;">上传用户头像</span> <span class="bt">必选</span></view>
				</view>
				<!-- avatar  注册图片字段 -->
				<u-form-item prop="avatar">
					<view class="upload">
						<u-upload :action="action" :file-list="list" :max-size="imageMaxSize" :max-count="max_count"
							:auto-upload="autoUpload" :show-upload-list="showUploadList" :del-bg-color="delBgColor"
							:del-color="delColor" :upload-text="uploadText" :limit-type="limitType" @on-success="onSuccess"
							@on-remove="onRemove" :icon="'camera'">

						</u-upload>
					</view>
				</u-form-item>

			</u-form>
		</view>


		<view class="zhu">
			注：身份、国籍确定后不可修改，请您根据实际情况进行选择
		</view>
		<!-- 下一步 -->
		<view class="au_but">
			<view style="width: 90%;">
				<u-button class="custom-style" @click="handelSubmit">{{ $t('确定') }}</u-button>
			</view>
		</view>
		<!-- 身份弹窗 -->
		<!-- <u-picker v-model="identityShow" mode="selector" :range="identityList" :range-key="lang==='zh'?'name':'name_ru'"
			:confirm-text="$t('确定')" :cancel-text="$t('取消')" @confirm="handelConfirm"
			:default-selector="[selectorIndex]" /> -->
		<!-- <view class="backColor"></view> -->

		<!-- 获取权限的功能 -->
		<Permission></Permission>
	</view>
</template>

<script>
import {
	HTTP_REQUEST_URL,
	IMAGE_MAX_SIZE,
	IMAGE_MAX_COUNT,
	IMAGE_URL,
	HTTP_IMG_UTL
} from '@/config/app';
import formCity from "@/components/buildForm/formCity.vue";
import Permission from "@/components/Permission.vue"

export default {
	components: {
		formCity,
		Permission
	},
	data() {
		return {
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
			HTTP_IMG_UTL,
			selectorIndex: 0,
			// formCity  组件使用的配置文件
			cityItem: {
				key: "city_id",
				label: false,
				placeholder: this.$t('请选择所在地区'),
				type: "city",
				required: true,
				value: [],
				rules: {},
			},
			identityShow: false, //身份选择弹窗控制
			identityList: [], //身份
			identityTitle: '', //选择的身份
			identityId: '', //选择身份的id
			identityType: '', //选择身份的type值
			country: 0, //国家
			model: { //form表单
				identity_title: '', //身份名称
				name: '', //姓名或公司名称
				area_id: '', //城市地区
				avatar: '', //头像地址
			},
			rules: { //form表单校验
				identity_title: [{
					required: true,
					message: this.$t('请选择身份'),
					trigger: ['blur', 'change']
				}],
				name: [{
					required: true,
					message: this.$t('请输入公司名称/用户昵称'),
					trigger: ['blur', 'change']
				}],
				area_id: [{
					required: true,
					message: this.$t('请选择所在地区'),
					trigger: ['blur', 'change']
				}],
				avatar: [{
					required: true,
					message: this.$t('请上传用户头像'),
					trigger: ['blur', 'change']
				}],
			},
			lang: 'zh', //默认语言
			nationalitys: [ //国籍
				{
					name: '中国',
					imgurl: "/static/country/2.png"
				},
				{
					name: '俄罗斯',
					imgurl: "/static/country/8.png"
				},
				{
					name: '哈萨克斯坦',
					imgurl: "/static/country/6.png"
				},
				{
					name: '白俄罗斯',
					imgurl: "/static/country/3.png"
				},
				{
					name: '吉尔吉斯斯坦',
					imgurl: "/static/country/4.png"
				},
				{
					name: '乌兹别克斯坦',
					imgurl: "/static/country/5.png"
				},
				{
					name: '土库曼斯坦',
					imgurl: "/static/country/1.png"
				},
				{
					name: '乌克兰',
					imgurl: "/static/country/7.png"
				},
				{
					name: '塔吉克斯坦',
					imgurl: "/static/country/9.png"
				},
			],
			identity: [ //身份
				{
					name: '供应商'
				},
				{
					name: '采购商'
				},
				{
					name: '货代公司'
				},
				{
					name: '运输公司'
				},
				{
					name: '服务商'
				},
				{
					name: '翻译'
				},
				{
					name: '游客'
				},
			],
			language: [{ //切换语言
				name: '中'
			}, {
				name: 'RU'
			}],
			indexID: 0, //选中的下标
			countryID: 0, //国籍下标
			identityIndex: 0, //身份下标
			identityName: '', //选择的身份名称
			Choose_identity_index: 0, //选择身份的下标
			max_count: 1,
			imageLoading: false,
			action: HTTP_REQUEST_URL + '/common/upload',
			imageMaxSize: IMAGE_MAX_SIZE,
			imageMaxCount: IMAGE_MAX_COUNT,
			autoUpload: true,
			showUploadList: true,
			delBgColor: '#fa3534',
			delColor: '#ffffff',
			uploadText: this.$t('选择图片'),
			limitType: ['png', 'jpg', 'jpeg', 'webp', 'gif', 'image'],
			list: [],
			fullBeginAddress: '',
			fullBeginAddressKey: '',
			showFlaxxx: true,
		}
	},

	onShow() {
		this.nowLang = this.$i18n.locale
		// 获取当权语言
		this.getLang()


	},
	methods: {
		onChangeDiqu(e) {
			console.log(e, '哪个国家')
			this.fullBeginAddressKey = e.column3.value;
			this.fullBeginAddress = e.column1.label + '-' + e.column2.label + '-' + e.column3.label;

			this.Location = e.column1.label == '中国' ? 0 : 1;
			this.model.area_id = JSON.stringify(e.column3.value)
			console.log(this.model.area_id, '参数参数')
			// 获取身份
			this.getIdentity()

		},
		// 下一步
		handelSubmit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {

					let data = {
						country: this.countryID, //国籍
						identity_id: this.identityId, //身份
						name: this.model.name, //请输入公司名称/姓名
						area_new_id: this.model.area_id,
						avatar: this.model.avatar,
						user_id: uni.getStorageSync('user_id')
					}

					uni.showLoading({ title: 'loading' })
					try {
						this.$u.api.basic.identity_set({
							...data
						}).then((res) => {
							console.log(res, '返回值')
							uni.showToast({
								title: '提交成功'
							})
							setTimeout(() => {
								uni.removeStorageSync('countryxxx')
								uni.reLaunch({ 
									url: '/pages/tabbar/index',
								})

							}, 700);
							uni.hideLoading({})
						}).catch(() => {
							uni.hideLoading({})
						})
					} catch (error) {
						uni.hideLoading({})
					}


					return;
					console.log(this.identityType);
					switch (this.identityType) {
						// case 9:
						// 	uni.navigateTo({
						// 		url: '/pages/user/register/salesman?data=' + JSON.stringify(data)
						// 	})
						// 	break;
						case 0:
						case 1:
							uni.navigateTo({
								url: '/pages/user/register/supplier?data=' + JSON.stringify(data)
							})
							break;
						case 6:
						case 7:
							uni.navigateTo({
								url: '/pages/user/register/domesticIogistics?data=' + JSON.stringify(
									data)
							})
							break;
						case 4:
						case 9:
							uni.navigateTo({
								url: '/pages/user/register/serviceCompany?data=' + JSON.stringify(data)
							})
							break;
						case 5:
							uni.navigateTo({
								url: '/pages/user/register/declareCustoms?data=' + JSON.stringify(data)
							})
							break;
						case 2:
							uni.navigateTo({
								url: '/pages/user/register/freightForwarding?data=' + JSON.stringify(
									data)
							})
							break;
						case 8:
							uni.navigateTo({
								url: '/pages/user/register/driver?data=' + JSON.stringify(data)
							})
							break;
						case 3:
							uni.navigateTo({
								url: '/pages/user/register/purchase?data=' + JSON.stringify(data)
							})
							break;
						case 11:
							uni.navigateTo({
								url: '/pages/user/register/purchase?data=' + JSON.stringify(data)
							})
							break;
						default:
							console.log('err');
					}
				} else {
					console.log('验证失败')
				}
			})
		},
		// 获取所在地区的值
		selCity(key, value) {
			this.Location = value[0].value
			this.model.area_id = JSON.stringify(value[2].value)
			// 获取身份
			this.getIdentity()
		},
		// 选择的身份
		handelConfirm(e) {
			this.identityList.map(item => {
				item.active = false;
			})
			e.active = true;
			// this.selectorIndex = e[0]
			// this.identityId = this.identityList[e[0]].id
			// this.identityType = this.identityList[e[0]].type
			// if (this.lang === 'zh') {
			// 	this.identityTitle = this.identityList[e[0]].name
			// 	this.model.identity_title = this.identityList[e[0]].name
			// } else {
			// 	this.identityTitle = this.identityList[e[0]].name_ru
			// 	this.model.identity_title = this.identityList[e[0]].name_ru
			// }
			this.identityId = e.id;
			this.identityType = e.type;
			if (this.lang === 'zh') {
				this.identityTitle = e.name
				this.model.identity_title = e.name
			} else {
				this.identityTitle = e.name_ru
				this.model.identity_title = e.name_ru
			}
		},
		// 控制身份弹窗的显示与隐藏
		handelIdentity() {

			if (this.model.area_id) {
				this.identityShow = !this.identityShow
			} else {
				uni.showToast({
					title: this.$t('请选择地区'),
					icon: 'none'
				})
			}

		},
		// 切换语言
		handelLang(index) {
			// 设置手机号选择的+86或+7
			// this.AreaCode = this.selectorObj[index].name
			this.indexID = index
			// 切换语言
			if (index === 0) {
				this.lang = 'zh'
			} else {
				this.lang = 'ru'
			}
			/** 设置语言 */
			uni.setStorage({
				key: 'lang',
				data: this.lang
			})
			// 更新语言
			getApp().globalData.lang = this.lang
			this.$i18n.locale = this.lang
			uni.reLaunch({
				url: '/pages/user/register/authentication'
			})
		},
		// 返回首页
		handelReturn() {
			uni.switchTab({
				url: '/pages/tabbar/index'
			})
		},
		// 选择的国籍
		handelNationalitys(index) {
			// 下标赋值
			this.countryID = index
			// 选择的国家
			this.country = index
			uni.setStorageSync('countryxxx', index)
			if (index === 0) {
				this.lang = 'zh'
			} else {
				this.lang = 'ru'
			}
			/** 设置语言 */
			uni.setStorage({
				key: 'lang',
				data: this.lang
			})
			// 更新语言

			// 选择国籍的同时切换国籍调取身份接口
			// this.getIdentity()
			// this.fullBeginAddress = '';
			// this.fullBeginAddressKey = '';
			// this.model.area_id = '';
			// // 身份证重置
			// this.model.identity_title = '';
			// this.identityId = '';
			// this.identityType = '';
			// this.identityList = [];

			getApp().globalData.lang = this.lang
			this.$i18n.locale = this.lang


			uni.reLaunch({
				url: '/pages/user/register/authentication'
			})
		},
		onSuccess(data, index, lists, name) { // 上传成功
			// console.log('success', lists)
			this.setFromData(lists)
		},
		onRemove(index, lists, name) {
			// console.log('remove', lists)
			this.setFromData(lists)
		},
		setFromData(lists) {
			let formData = [];
			if (lists.length > 0) {
				for (let i = 0; i < lists.length; i++) {
					if (lists[i].response) {
						let temp = {
							url: lists[i].response.data.url
						}
						formData.push(temp)
					} else if (lists[i].url) {
						let temp = {
							url: lists[i].url
						}
						formData.push(temp)
					}
				}
			} else {
				formData = []
			}
			console.log('formData', formData)
			this.model.avatar = formData[0].url
			// this.$emit('change', this.item.key, formData)
		},
		// 获取当前缓存语言
		getLang() {
			// 获取缓存lang当前语言值
			uni.getStorage({
				key: 'lang',
				success: res => {
					if (res.data == 'zh') { //zh为中国，赋值0
						this.indexID = 0
						this.countryID = 0
						this.lang = 'zh'
					} else { //其他为俄罗斯，赋值1

						this.indexID = 1
						this.countryID = 1
						this.lang = 'ru'
						if (uni.getStorageSync('countryxxx')) {
							this.indexID = 1
							this.countryID = uni.getStorageSync('countryxxx')
						}
					}
				}
			});
		},
		// 获取身份信息
		getIdentity() {
			this.$u.api.basic.getIdentityList({
				country: this.countryID == 0 ? 0 : 1, //国家
				area: this.Location
			}).then(res => {
				this.identityList = res.map(item => {
					item.active = false;
					return item;
				})
				// this.identityList = res
			}).catch(err => {
				console.log('getIdentityList-err', err);
			});
		}
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	}
}
</script>

<style lang="scss" scoped>
.backColor {
	width: 100%;
	height: 400rpx;
	background-image: url('/static/img/bg_1.png');
	background-size: cover;
	position: absolute;
	top: 0;
	z-index: -1;
}

.no_border {
	border: none;
}

.flex_1 {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;

	&.wrap {
		flex-wrap: wrap;
	}
}

.custom-style {
	// background-color: #000000;
	// color: #ffffff;
	background: linear-gradient(to left, #64D4E3, #2A8EFE);
	border-radius: 80rpx;
	color: #ffffff;
	height: 100rpx;
	box-shadow: 0 25rpx 26rpx #daeef7;
	border: 0;
}

.au_but {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 20rpx 0rpx 100rpx 0rpx;
}

.au_form {
	width: calc(100% - 60rpx);
}

.guoji {
	// width: 156rpx;
	height: 64rpx;
	border-radius: 16rpx;
	flex: none;
	font-size: 24rpx;
	display: inline-flex;
	align-items: center;
	// justify-content: center;
	background: #F7F7F7;
	width: calc((100% - 24rpx) / 3);
	margin-bottom: 16rpx;
	margin-right: 12rpx;
	padding-left: 12rpx;

	&:nth-child(3n) {
		margin-right: 0;
	}

	image {
		margin-right: 6rpx;
	}

}

.identityitem {
	// width: 156rpx;
	height: 64rpx;
	border-radius: 16rpx;
	flex: none;
	font-size: 24rpx;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #F7F7F7;
	width: calc((100% - 52rpx) / 3);
	margin-bottom: 16rpx;
	margin-right: 26rpx;
	line-height: 22rpx;
	text-align: center;

	&:nth-child(3n) {
		margin-right: 0;
	}
}


.items_active {

	// border: 1px solid #278AFF;
}

.items {
	border: 1px solid #278AFF;
	background: #D7E9FF;
	color: #278AFF;
}

.au_nat {
	width: calc(100% - 60rpx);
	// height: 160rpx;
	display: flex;
	align-items: center;
	// justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 32rpx;
}

.identity {
	width: calc(100%);
	// height: 160rpx;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 32rpx;
}

.au_identity_title {
	width: calc(100% - 60rpx);
	font-size: 28rpx;
	display: flex;
	justify-content: flex-start;
	font-weight: 600;
	margin-top: 60rpx;
}

.au_nationality_title {
	width: calc(100% - 60rpx);
	font-size: 28rpx;
	display: flex;
	justify-content: flex-start;
	font-weight: 600;
	margin-top: 50rpx;

	.bt {
		position: relative;
		top: -4rpx;
	}

	&.firstxx {
		margin-top: 26rpx;
	}
}


.active {
	border: 1px solid #278AFF;
	background: #D7E9FF;
	color: #278AFF;
}

.itemActive {
	width: 136rpx;
	height: 48rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	// border: 1rpx solid #000000;
	color: #ffffff;
	border-radius: 26rpx;
	// background-color: #D5EF9B;
	background: linear-gradient(to bottom, #64D4E3, #2A8EFE);
}

.au_lang_ri {
	width: 284rpx;
	height: 50rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.au_imgs {
	margin-top: 18rpx;
	width: calc(100% - 60rpx);
	display: flex;
	flex-direction: column;
}

.au_lang {
	margin: 58rpx 0 18rpx 0;
	height: 50rpx;
	width: calc(100% - 80rpx);
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.au_return {
	width: calc(100% - 60rpx);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 26rpx 0;
}

.zhu {
	width: calc(100% - 60rpx);
	color: #F53F3F;
	font-family: "PingFang SC";
	font-size: 20rpx;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
	text-align: center;
	margin-top: 30rpx;
}

.au_content {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.identity_item {
	flex: none;
	font-size: 24rpx;
	color: #C8C8C8;
	border: 1px solid #C8C8C8;
	border-radius: 16rpx;
	min-width: 156rpx;
	line-height: 24rpx;
	min-height: 60rpx;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20rpx;

	&.active {
		color: #333333;
		border-color: #333333;
	}
}

.bt {
	// width: 64px;
	height: 22rpx;
	padding: 7rpx 20rpx;
	margin: 0 0 0 10rpx;
	flex-shrink: 0;
	color: #278AFF;
	font-family: "PingFang SC";
	font-size: 20rpx;
	font-style: normal;
	font-weight: 500;
	line-height: 15rpx;
	border-radius: 100rpx;
	background: #D7E8FA;
}

.upload {
	width: calc(100% - 60rpx);
	display: flex;
	justify-content: flex-start;
}


.inpxxx {
	height: 80rpx;
	border-radius: 18rpx;
	background: #F7F7F7;
	width: 100%;
	padding-left: 24rpx;
	color: #8C8C8C;
	font-size: 26rpx;
	font-weight: 400;
}
</style>